<template>
   <div>
      <div style="text-align: left; margin-bottom: 20px">
         <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 200px"
         ></el-input>
         <el-button
            icon="el-icon-search"
            @click="search"
            style="text-align: center"
            ><el-icon><Search /></el-icon>
         </el-button>
      </div>
      <el-row :gutter="20">
         <el-col
            v-for="(item, i) in 5"
            :key="i"
            class="itemA"
            :span="6"
            style="margin-bottom: 10px; cursor: pointer"
            @click="playVideo(i)"
         >
            <div style="height: 100%">
               <div style="width: 100%; height: calc(100% - 40px)">
                  <el-image
                     style="width: 100%; height: 100%"
                     :src="url[i]"
                     :fit="contain"
                  />
               </div>
               <div
                  style="
                     height: 40px;
                     overflow: hidden;
                     display: -webkit-box;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
                     text-overflow: ellipsis;
                     overflow: hidden;
                  "
               >
                  {{ text[i] }}
               </div>
            </div>
         </el-col>
      </el-row>
   </div>
</template>

<script>
export default {
   name: "VideoStudy",
   setup() {

      let url_r = [
         "https://www.bilibili.com/video/BV1RQ4y1L7Ar/?spm_id_from=333.337.search-card.all.click",
         "https://www.bilibili.com/video/BV1YP411e7mu/?spm_id_from=333.337.search-card.all.click",
         "https://www.bilibili.com/cheese/play/ss8203?query_from=0&search_id=1627787205171625395&search_query=%E8%80%83%E7%A0%94%E8%A7%86%E9%A2%91&csource=common_hpsearch_null_null&spm_id_from=333.337.search-card.all.click",
         "https://www.bilibili.com/video/BV19h4y1N7Br/?spm_id_from=333.337.search-card.all.click",
         "https://www.bilibili.com/video/BV14h4y1y79z/?spm_id_from=333.337.search-card.all.click",
      ];

      let text = [
         "25考研 | 一整年全流程详解",
         "张雪峰考研视频教我上岸985，考研的人都应该看看这个视频！",
         "【倒计时2天】徐涛X颉斌斌 | 25考研政英联报名",
         "张雪峰考研视频教我上岸985，专硕和学硕上岸区别，血泪教训",
         "张雪峰考研视频教我上岸985，终于有人把考研择校说清楚了",
      ];

      let url = [
         require("@/assets/video/1.png"),
         require("@/assets/video/2.png"),
         require("@/assets/video/3.png"),
         require("@/assets/video/4.png"),
         require("@/assets/video/5.png"),
      ];

      function playVideo(i) {
         window.location.href = url_r[i]
      }

      const search = () => {};
      return {
         text,
         url,
         search,
         url_r,
         playVideo,
      };
   },
};
</script>

<style scoped>
.itemA {
   height: 260px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   border-radius: 4px;
}

::v-deep .itemA img {
   width: 100%;
   height: 100%;
   border-radius: 4px;
}
</style>